<template>
  <div>
    <mapbox-map ref="mapboxmap" map-height="100%" map-width="100%"></mapbox-map>
    <a-button v-on:click="clicked()">ClickMe</a-button>
    <logo ref="logo" class="qs-logo"></logo>
    <toolbar ref="toolbar" @toolbarMethods="toolbarMethods" class="qs-toolbar"></toolbar>
    <ndvi-legend ref="ndvi-legend" class="qs-ndvi-legend"></ndvi-legend>
    <timeseries-control ref="timeseries-control" class="qs-timeseries-control"></timeseries-control>
  </div>
</template>

<script>
// 加{}跟不加有什么区别？
// div中引入组件是将驼峰命名转为-命名
import { MapboxMap, Logo, Toolbar, NdviLegend, TimeseriesControl } from '../../components'
import screenfull from 'screenfull'

export default {
  components: {
    MapboxMap,
    Logo,
    Toolbar,
    NdviLegend,
    TimeseriesControl
  },
  data () {
    return {
      isFullscreen: false
    }
  },
  methods: {
    clicked () {
      // 调用mapboxmap组件的方法
      this.$refs.mapboxmap.addLayer()
    },
    toolbarMethods (data) {
      if (data === 'zoomin') {
        this.$refs.mapboxmap.zoomIn()
      } else if (data === 'zoomout') {
        this.$refs.mapboxmap.zoomOut()
      } else if (data === 'fullscreen') {
        if (!screenfull.isEnabled) {
          this.$message({
            message: 'you browser can not work',
            type: 'warning'
          })
          return false
        }
        screenfull.toggle()
      }
    }
  }
}
</script>

<style scoped>
  div {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
  }

  .qs-logo {
    z-index: 9999;
    position: absolute;
    bottom: 40px;
    left: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 28px;
    width: 77px;
    height: 21px;
  }

  .qs-toolbar {
    z-index: 9999;
    position: absolute;
    top: 80px;
    left: 20px;
    height: 350px;
    width: 30px;
  }

  .qs-ndvi-legend{
    z-index: 9999;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 300px;
    height: 20px;
    cursor: pointer;
    -webkit-transition: .3s opacity;
    transition: .3s opacity;
    margin-bottom: 5px;
    border-radius: 20px;
  }

  .qs-timeseries-control{
    z-index: 9999;
    position: absolute;
    bottom: 35px;
    left: 350px;
    margin-bottom: 5px;
    height: 0px;
    width: 800px;
  }
</style>
